<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流描述文件生成</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./stylesheets/flow.css">
</head>
<body>
    <header>
        <ul class="nav nav-pills">
            <li class="active"><a href="#basic">Basic</a></li>
            <li><a href="#cdf">CDF</a></li>
            <li><a href="#flow">Flow</a></li>
        </ul>
    </header>
    <main>
        <!-- simulation parameters -->
        <div id="basic" class="col-md-offset-2">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="topoType" class="col-md-2 control-label">拓扑类型</label>
                    <div class="col-md-4">
                        <select class="form-control" id="topoType">
                            <option value="2" selected>二层拓扑</option>
                            <option value="3">三层拓扑</option>
                        </select>
                    </div>
                </div>
                <!-- only for 2 level topology -->
                <div class="level2">
                    <div class="form-group">
                        <label for="uswitchnum" class="col-md-2 control-label">上层交换机数</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="uswitchnum" placeholder="请输入正整数">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lswitchnum" class="col-md-2 control-label">底层交换机数</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="lswitchnum" placeholder="请输入正整数">
                        </div>
                    </div> 
                </div>
                <!-- only for 3 level topology -->
                <div class="level3">
                    <div class="form-group">
                        <label for="coreswitchnum" class="col-md-2 control-label">核心交换机数</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="coreswitchnum" placeholder="请输入正整数">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="podnum" class="col-md-2 control-label">POD数目</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="podnum" placeholder="请输入正整数">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pswitchnum" class="col-md-2 control-label">POD中单层交换机数</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="pswitchnum" placeholder="请输入正整数">
                        </div>
                    </div>
                </div>
                <!-- In common -->
                <div class="form-group">
                    <label for="phostnum" class="col-md-2 control-label">单个交换机连接主机数</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="phostnum" placeholder="请输入正整数">
                    </div>
                </div>
                <div class="form-group">
                    <label for="ctrlpos" class="col-md-2 control-label">控制器位置</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="ctrlpos" placeholder="请输入正整数，范围为1到主机数">
                    </div>
                </div>
                <div class="form-group">
                    <label for="simutime" class="col-md-2 control-label">仿真时长</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="simutime" placeholder="请输入整数，单位为秒">
                    </div>
                </div>
                <!--
                <div class="form-group">
                    <label for="outfile" class="col-md-2 control-label">输出文件</label>
                    <div class="col-md-4">
                        <input type="file" id="outfile">
                    </div>
                </div>
                -->
                <div class="form-group">
                    <div class="col-md-offset-3 col-md-1">
                        <button type="button" class="form-control btn btn-success" id="confirm">确认</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- self-defined flow-size, packet-size, packet-interval CDF rules -->
        <div id="cdf" class="col-md-offset-2">
            <!--<button class="btn btn-primary">添加流大小自定义CDF分布</button>-->
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="cdfname" class="col-md-2 control-label">CDF分布名称</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="cdfname" placeholder="请输入CDF分布名称">
                    </div>
                </div>
                <div class="form-group">
                    <label for="flowsize" class="col-md-2 control-label">流大小</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="flowsize" placeholder="请输入整数">
                    </div>
                    <div class="col-md-1">
                        <select class="form-control" id="flowsizeunit">
                            <option value="B">B</option>
                            <option value="KB" selected>KB</option>
                            <option value="MB">MB</option>
                            <option value="GB">GB</option>
                        </select>
                    </div>
                </div> 
                <div class="form-group">
                    <label for="flowsizecdfvalue" class="col-md-2 control-label">累计分布</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="flowsizecdfvalue" placeholder="请输入[0,1]之间的实数">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-2">
                        <button type="button" id="addFlowSizeCDFBtn" class="btn btn-primary">添加流大小CDF分布规则</button>
                    </div>
                </div>
            </form>

            <!--<button class="btn btn-primary">添加流大小自定义CDF分布</button>-->
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="packetsize" class="col-md-2 control-label">报文大小</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="packetsize" placeholder="请输入整数">
                    </div>
                    <div class="col-md-1">
                        <select class="form-control" id="packetsizeunit">
                            <option value="B" selected>B</option>
                            <option value="KB">KB</option>
                        </select>
                    </div>
                </div> 
                <div class="form-group">
                    <label for="packetsizecdfvalue" class="col-md-2 control-label">累计分布</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="packetsizecdfvalue" placeholder="请输入[0,1]之间的实数">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-2">
                        <button type="button" id="addPacketSizeCDFBtn" class="btn btn-primary">添加报文大小CDF分布规则</button>
                    </div>
                </div>
            </form>

            <!--<button class="btn btn-primary">添加流大小自定义CDF分布</button>-->
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="flowsize" class="col-md-2 control-label">报文间隔</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="packetinterval" placeholder="请输入整数">
                    </div>
                    <div class="col-md-1">
                        <select class="form-control" id="packetintervalunit">
                            <option value="s">s</option>
                            <option value="ms">ms</option>
                            <option value="us" selected>us</option>
                        </select>
                    </div>
                </div> 
                <div class="form-group">
                    <label for="packetintervalcdfvalue" class="col-md-2 control-label">累计分布</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="packetintervalcdfvalue" placeholder="请输入[0,1]之间的实数">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-2">
                        <button type="button" id="addPacketIntervalCDFBtn" class="btn btn-primary">添加报文间隔CDF分布规则</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4">
                        <table id="tempflowsizecdf" class="table table-hover">
                            <thead>
                                <tr>
                                    <th>流大小</th>
                                    <th>累计分布</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4">
                        <table id="temppacketsizecdf" class="table table-hover">
                            <thead>
                                <tr>
                                    <th>报文大小</th>
                                    <th>累计分布</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-4">
                        <table id="temppacketintervalcdf" class="table table-hover">
                            <thead>
                                <tr>
                                    <th>报文间隔</th>
                                    <th>累计分布</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-3 col-md-2">
                        <button type="button" id="confirmCDFBtn" class="btn btn-success">确认CDF分布</button>
                    </div>
                </div>
                <!-- self-defined CDF rules display HERE -->
            </form>
        </div>

        <!-- add flows -->
        <div id="flow" class="col-md-offset-2">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="granularity" class="col-md-2 control-label">源目选取粒度</label>
                    <div class="col-md-4">
                        <select class="form-control" id="granularity">
                            <option value="主机">主机</option>
                        </select>
                    </div>
                </div>                
                <div class="form-group">
                    <label for="src" class="col-md-2 control-label">源</label>
                    <div class="col-md-4">
                        <select class="form-control" name="src" id="src">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="dst" class="col-md-2 control-label">目</label>
                    <div class="col-md-4">
                        <select class="form-control" id="dst">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="prototype" class="col-md-2 control-label">应用类型</label>
                    <div class="col-md-4">
                        <select class="form-control" id="prototype">
                            <option value="HTTP">HTTP</option>
                            <option value="SMTP">SMTP</option>
                            <option value="FTP">FTP</option>
                            <option value="DNS">DNS</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="flownum" class="col-md-2 control-label">流数目</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="flownum" placeholder="请输入正整数">
                    </div>
                </div>
                <div class="form-group">
                    <label for="flowtrace" class="col-md-2 control-label">数据来源</label>
                    <div class="col-md-4">
                        <select class="form-control" id="flowtrace">
                            <option value="真实Trace数据">真实Trace数据</option>
                            <option value="真实Trace流大小CDF分布">真实Trace流大小CDF分布</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-3 col-md-1">
                        <button type="button" id="addflow" class="form-control btn btn-primary">添加流</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-3 col-md-1">
                        <button type="button" id="startSimulation" class="form-control btn btn-success">开始仿真</button>
                    </div>
                </div>
                <!-- flows display HERE -->
                <div class="form-group">
                    <div class="col-md-offset-1 col-md-6">
                        <table id="flowstats" class="table table-hover">
                            <thead>
                                <tr>
                                    <th>源目粒度</th>
                                    <th>源</th>
                                    <th>目</th>
                                    <th>应用类型</th>
                                    <th>流数目</th>
                                    <th>流来源</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </main> 
    <footer>
    </footer>
    <script src="./javascripts/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./javascripts/flow.js"></script>
</body>
</html>
